<template lang="pug">
.detail
  .detail-content
    .detail-content-header
      el-button(icon="el-icon-arrow-left" size="small" name="back" @click="$router.back()") 返回
      .content-header-title 找材详情
    .detail-content-info
      .info-row
        .info-row-label 产品名称：
        .info-row-value {{detail.demandName}}
      .info-row
        .info-row-label 项目类型：
        .info-row-value {{detail.projectType}}
      //- .info-row
        .info-row-label 项目地址：
        .info-row-value {{detail.location}}
      .info-row
        .info-row-label 项目规模：
        .info-row-value {{detail.projectScale}}
      .info-row
        .info-row-label 需求量：
        .info-row-value {{detail.demandNums}}
      .info-row
        .info-row-label 电话：
        .info-row-value {{detail.contactPhone}}
      .info-row
        .info-row-label 联系人：
        .info-row-value {{detail.contactPerson}}
      .info-row.info-row-start
        .info-row-label 需求图片：
        .info-row-value.info-row-value_imgs
          .info-row-img(v-for="item in detail.imgUrlLists" :style="{ 'background-image': `url(${item.fileUrl})` }")
      .info-row
        .info-row-label 模型文件：
        .info-row-value 新型的岩板
      .info-row.info-row-start
        .info-row-label 需求描述：
        .info-row-value {{detail.demandDescription}}
  .detail-comment
    .detail-comment-title 评论
    .detail-comment-textarea
      el-input(v-model="contxt" type="textarea" rows="5" resize="none" placeholder="请输入")
      .detail-comment-btn
        el-button(size="small" type="primary" @click="postComment") 评论
    .detail-comment-bd
      .comment-row(v-for="row, rowIndex in comments" v-if="rowIndex < showMoreNum")
        .comment-row-info
          .comment-row-head(:style="{ 'background-image': `url(${row.headImage})` }")
          .comment-row-info-bd
            .comment-row-name {{row.fromUser}}
            .comment-row-desc {{row.commentContext}}
            .comment-row-ft
              .comment-row-time {{row.commentTime | filterDate}}
              .comment-row-handle(@click="commentRow(row)")
                .iconfont.icon-edit
                span 回复
            .comment-col-body(:style="{ 'height': row.showMore ? '300px' : 'auto' }")
              .comment-col(v-for="col, colIndex in row.children")
                .comment-row-head(:style="{ 'background-image': `url(${col.headImage})` }")
                .comment-col-bd
                  .comment-row-name {{col.fromUser}}
                  .comment-row-desc
                    span 回复
                    label {{col.toUser}}：
                    span {{col.commentContext}}
                  .comment-row-ft
                    .comment-row-time {{col.commentTime | filterDate}}
                    .comment-row-handle(@click="commentCol(col)")
                      .iconfont.icon-edit
                      span 回复
        .comment-row-more(v-if="row.showMore" @click="showChildrenMore(row)") 查看更多回复
      .detail-comment-more(v-if="comments.length > showMoreNum" @click="showRowMore") 查看更多评论
  comment-modal(:show="showDialog", :currentItem="currentItem", :materialId="$route.params.id" @close="closeDialog" @success="successDialog")
</template>

<script>
import { getFindMaterialDetail, postAddComment } from 'api'
import commentModal from '@/components/modal/commentModal'
export default {
  name: 'findMaterialDetail',
  data () {
    return {
      detail: {
        imgUrlLists: []
      },
      comments: [],
      currentItem: {},
      showDialog: false,
      contxt: '',
      showMoreNum: 3
    }
  },
  components: {
    commentModal
  },
  methods: {
    async getDetail () {
      try {
        const { ResultSet } = await this.$axios.post(getFindMaterialDetail, { content: { id: this.$route.params.id } })
        this.detail = ResultSet.userData.result
        ResultSet.userData.comments.forEach(item => {
          if (item.children.length > 2) item.showMore = true
          else item.showMore = false
        })
        this.comments = ResultSet.userData.comments
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async postComment () {
      try {
        if (!this.contxt) {
          this.$message.error('请先输入要评论的内容！')
          return
        }
        await this.$axios.post(postAddComment, { content: { findMaterialId: this.$route.params.id, commentContext: this.contxt } } )
        this.$message.success('回复成功！')
        this.contxt = ''
        this.getDetail()
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    showChildrenMore (row) {
      row.showMore = false
    },
    showRowMore () {
      this.showMoreNum = Infinity
    },
    commentRow (row) {
      this.currentItem = row
      this.showDialog = true
    },
    commentCol (col) {
      this.currentItem = col
      this.showDialog = true
    },
    closeDialog () {
      this.showDialog = false
      this.currentItem = {}
    },
    successDialog () {
      this.showDialog = false
      this.currentItem = {}
      this.getDetail()
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getDetail()
    })
  }
} 
</script>

<style lang="scss" scoped>
.detail {
  padding: 0 32px 16px;
}
.detail-content {
  width: 100%;
  padding: 0 24px;
  background: #FFFFFF;
  border-radius: 4px;
}
.detail-content-header {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #CBCBCB;
}
.content-header-title {
  margin-left: 16px;
  font-size: 16px;
  font-weight: bold;
  color: #363636;
}
.detail-content-info {
  padding: 24px 0;
  
}
.info-row {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  &.info-row-start {
    align-items: flex-start;
  }
  .info-row-label {
    min-width: 90px;
    font-size: 14px;
    color: #AFAFAF;
  }
  .info-row-value {
    font-size: 14px;
    color: #363636;
    &.info-row-value_imgs {
      display: flex;
    }
  }
  .info-row-img {
    width: 150px;
    height: 100px;
    margin-right: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 4px;
  }
}
.detail-comment {
  margin-top: 16px;
  padding: 24px;
  background: #FFFFFF;
  border-radius: 4px;
}
.detail-comment-title {
  font-size: 16px;
  font-weight: bold;
  color: #363636;
}
.detail-comment-textarea {
  margin-top: 19px;
}
.detail-comment-btn {
  margin-top: 17px;
  text-align: right;
}
.comment-row {
  padding: 20px 0;
  border-bottom: 1px solid #C7C7C7;
}
.comment-row-info {
  display: flex;
}
.comment-row-head {
  width: 48px;
  min-width: 48px;
  height: 48px;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.comment-row-info-bd {
  flex: 1;
  margin-left: 20px;
}
.comment-row-name {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}
.comment-row-desc {
  margin-top: 10px;
  color: #666666;
  font-size: 14px;
  span {
    margin-right: 10px;
  }
  label {
    font-weight: bold;
    color: #363636;
  }
}
.comment-row-ft {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.comment-row-time {
  font-size: 14px;
  color: #999999;
}
.comment-row-handle {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #363636;
  cursor: pointer;
  .iconfont {
    margin-right: 12px;
  }
}
.comment-col {
  margin-top: 20px;
  width: 100%;
  padding: 20px 30px;
  background: #F3F3F3;
  border-radius: 4px;
  display: flex;
}
.comment-col-bd {
  flex: 1;
  margin-left: 20px;
}
.comment-row-more {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  color: #666666;
  cursor: pointer;
}
.detail-comment-more {
  margin-top: 24px;
  font-size: 14px;
  color: #FF2E42;
  text-align: center;
  cursor: pointer;
}
.comment-col-body {
  overflow: hidden;
}
</style>
